<template>
	<view class="Setlocation">
		<p class="p1">为了提供更好的购物体验</p>
		<p class="p2">请根据您所在的位置选择合适的服务点</p>
		<view class="nowposition">
			<image src="../../static/img/home/morenweizhi.png" mode=""></image>
			<text class="text1" >{{ postion.poiname || '请选择地址' }}</text>
			<text @click="onmap" :style="{color: newColor.color}" class="text2">更换地址</text>
		</view>
		<view style="margin-bottom: 20upx;" v-if="mylocation.shop_name">
			<view class="dianpu_list" >
				<image :src="mylocation.head_img" mode=""></image>
				<view class="right_box">
					<p class="p1">
						<text class="text0">{{mylocation.shop_name}}</text>
						<text class="text2">距离您：{{mylocation.range}}公里</text>
					</p>
					<p class="p2">{{mylocation.mobile}}</p>
					<p class="p3">
						<image src="../../static/img/home/morenweizhi.png" mode=""></image>
						<text class="text1">{{ mylocation.address || '请选择地址' }}</text>
					</p>
				</view>
				<p class="moren" :style="{background: newColor.color}">您选择的服务点</p>
			</view>
		</view>
		<view style="margin-bottom: 20upx;" v-if="pointData.length !== 0">
			<view class="dianpu_list" v-for="(item,index) in pointData" :key="index" v-if="item.id !== pointid">
				<image :src="item.head_img" mode=""></image>
				<view class="right_box">
					<p class="p1">
						<text class="text0">{{item.shop_name}}</text>
						<text class="text2">距离您：{{item.range}}公里</text>
					</p>
					<p class="p2">{{item.mobile}}</p>
					<p class="p3">
						<image src="../../static/img/home/morenweizhi.png" mode=""></image>
						<text class="text1">{{ item.address || '请选择地址' }}</text>
					</p>
				</view>
				<p class="moren" :style="{background: newColor.color}" v-if="item.id == locationId">您选择的服务点</p>
				<p class="xuanze" :style="{background: newColor.color}" v-else @tap="setPosition(item)">选择</p>
			</view>
		</view>
		<nodata v-else></nodata>
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>
<script>
import qqmapsdk from '../../static/utils/qqmap-wx-jssdk.min.js';
import nodata from '../../components/nodata/nodata.vue'
import {setlocation} from '../../static/utils/ahth.js'
export default {
	components:{
		nodata
	},
	data() {
		return {
			postion: {
				poiaddress: '',
				poiname: '',
				latlng: {},
				newstatus: undefined
			},
			active:true,
			goodid:'',
			pageIndex: 1,
			pointData:[],
			locationId: '',
			mylocation:{},
			pointid:'',
			status:''
		};
	},
	filters:{
		setRange(value){
			if(!value){
				return 0
			}
			let data = Number(value) / 1000
			let newdata = data.toFixed(2)
			console.log(newdata)
			return newdata
		}
	},
	onPullDownRefresh() {
		console.log('下拉刷新');
		let that = this;
		that.pageIndex = 1;
		setTimeout(function() {
			that.getPoint();
			uni.stopPullDownRefresh();
		}, 500);
	},
	onReachBottom: function() {
		// pullScroll.success();
		console.log('上拉加载');
		let that = this;
		uni.showLoading({
			title: '加载中',
			duration: 500
		});
		setTimeout(() => {
			that.pageIndex++;
			that.request('common/getGoodsPointLeaderList', {
				type: 1,
				psize: 10,
				page: that.pageIndex,
				lat: that.latitude,
				lng: that.longitude
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					let newdata = res.data;
					that.pointData = that.pointData.concat(newdata);
				}
				uni.hideLoading();
				if(res.data.length == 0){
					uni.showToast({
						title:'已无更多数据',
						icon:'none'
					})
				}
			});
		}, 1000);
	},
	methods: {
		qqmap() {
			//获取用户位置
			const QQMapWX = new qqmapsdk({
				key: '7JFBZ-V2EH4-3CCU2-DL5N2-DZQL7-RTBOJ'
			});
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: res => {
					console.log('获取经纬度成功',res);
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				},
				fail: () => {
					console.log('获取经纬度失败');
				},
				complete: () => {
					// 解析地址
					QQMapWX.reverseGeocoder({
						location: {
							latitude: this.latitude,
							longitude: this.longitude
						},
						success: function(res) {
							console.log('解析地址成功');
							console.log(res);
							// 省
							let province = res.result.ad_info.province;
							// 市
							let city = res.result.ad_info.city;
							console.log(province);
							console.log(city);
						},
						fail: function(res) {
							// uni.showToast({
							// 	title: '定位失败',
							// 	duration: 2000,
							// 	icon: 'none'
							// });
							console.log(res);
						},
						complete: function(res) {
							console.log(res);
							that.postion.poiname = res.result.address;
							that.postion.latlng = res.result.ad_info.location;
							that.getPoint()
						}
					});
				}
			});
		},
		onmap() {
			//选择位置
			// #ifdef MP-WEIXIN
			let that = this;
			uni.chooseLocation({
				success: e => {
					console.log(e);
					that.postion.poiname = e.name;
					that.postion.poiaddress = e.address;
					that.postion.latlng.lat = e.latitude;
					that.postion.latlng.lng = e.longitude;
					that.latitude = e.latitude
					that.longitude = e.longitude
					that.getPoint()
				}
			});
			// #endif
			// #ifdef H5
			this.$Router.push({ path: '/pages/home/h5map' });
			// #endif
		},
		setPosition(item){//选择提货点
			this.request('user/bindGoodsPoint',{
				goods_point_id: item.id
			}).then(res=>{
				console.log(res)
				uni.showToast({
					title:res.msg
				})
				this.getuser()
				if(this.goodid){
					if(this.status == 0){
						this.$Router.push({path:'/pagesA/pages/goods/goodsDetails',query:{
							goodid: this.goodid
						}})
					}else if(this.status == 1){
						this.$Router.push({path:'/pagesA/pages/goods/assembleDetails',query:{
							goodid: this.goodid
						}})
					}
				}
			})
		},
		getuser(){//获取用户默认的提货点
			this.request('user/getUserInfo', {}).then(res => {
				this.pointid = res.data.goods_point_id
				this.getdefault()
			});
		},
		getdefault(){//获取用户默认的提货点
			this.request('user/getGoodsPointLeaderInfo', {
				type: 1,
				type_id: this.pointid,
				lat:this.latitude,
				lng:this.longitude
			}).then(res => {
				console.log(res)
				this.mylocation = res.data
				setlocation(res.data)
			});
		},
		getPoint(){//获取提货点
			this.request('common/getGoodsPointLeaderList',{
				type: 1,
				psize: 10,
				page: this.pageIndex,
				lat: this.latitude,
				lng: this.longitude
			}).then(res=>{
				console.log(res)
				this.pointData = res.data
			})
		}
	},
	onShow() {
		this.goodid = this.$Route.query.goodid
		this.status = this.$Route.query.status || 0
		this.getuser()
		setTimeout(()=>{
			this.active = false
		},600)
		if (this.$Route.query.poiaddress) {
			//h5端获取选择地址后返回的地址值
			this.postion = this.$Route.query;
			this.latitude = this.postion.latlng.lat
			this.longitude = this.postion.latlng.lng
			this.getPoint()
			console.log('获取的位置', this.postion);
		} else if (this.postion.poiaddress !== '') {
			// this.getLocation();
			console.log('小程序获取位置');
		} else {
			this.qqmap();
		}
	}
};
</script>

<style lang="scss" scoped>
.Setlocation {
	padding: 30upx;
	.p1 {
		text-align: center;
		font-size: 32upx;
		color: #333333;
		line-height: 50upx;
	}
	.p2 {
		text-align: center;
		font-size: 32upx;
		color: #333333;
		line-height: 50upx;
	}
	.nowposition {
		margin-top: 30upx;
		border-radius: 15upx;
		box-sizing: border-box;
		padding: 20upx;
		overflow: hidden;
		background-color: #fff;
		image {
			width: 30upx;
			height: 26upx;
			float: left;
			margin-top: 5upx;
		}
		.text1 {
			font-size: 24upx;
			width: 65%;
			float: left;
			margin-left: 10upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #999999;
		}
		.text2 {
			font-size: 24upx;
			float: right;
			height: 30upx;
			color: #f23a3a;
		}
	}
}
.dianpu_list {
	height: 180upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 21px 0px rgba(255, 74, 44, 0.1);
	border-radius: 15upx;
	box-sizing: border-box;
	padding: 20upx 30upx;
	position: relative;
	margin-top: 20upx;
	>image{
		width: 80upx;
		height: 80upx;
		float: left;
		border-radius:50%;
		margin-top: 20upx;
	}
	.right_box{
		float: right;
		text-align: left;
		margin-left: 20upx;
		width: 80%;
		image {
			width: 30upx;
			height: 26upx;
			float: left;
			margin-top: 5upx;
		}
		.p1{
			width: 100%;
			text-align: left;
			.text0{
				font-size: 28upx;
				color: #333333;
			}
			.text2{
				float: right;
				font-size: 24upx;
				color: #999999;
			}
		}
		.p2{
			text-align: left;
			font-size:24upx;
			color: #999999;
		}
		.text1 {
			font-size: 24upx;
			width: 70%;
			float: left;
			margin-left: 10upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #999999;
		}
	}
	.moren{
		position: absolute;
		width:180upx;
		height:36upx;
		line-height: 36upx;
		background:rgba(242,58,58,1);
		border-radius:6upx;
		color: #FFFFFF;
		font-size: 22upx;
		top: -15upx;
		text-align: center;
	}
	.xuanze{
		width:100upx;
		height:46upx;
		line-height: 46upx;
		background:rgba(242,58,58,1);
		border-radius:23upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		font-size:22upx;
		font-family:Droid Sans Fallback;
		font-weight:400;
		color:rgba(255,255,255,1);
		text-align: center;
	}
}
</style>
